<template>
  <div class="right-panel" v-show="$store.getters.getRightPanelType">
    <ChatSingle v-if="$store.getters.getRightPanelType === 'singlechat'"></ChatSingle>
    <ChatGroup v-if="$store.getters.getRightPanelType === 'groupchat'"></ChatGroup>
    <Welcome v-if="$store.getters.getRightPanelType === 'welcome'"></Welcome>
  </div>
</template>

<script>
import ChatSingle from './chat-single'
import ChatGroup from './chat-group'
import Welcome from './welcome'
export default {
  data () {
    return {
      // socketId: ''
    }
  },
  components: {
    Welcome,
    ChatSingle,
    ChatGroup
  },
  methods: {
  }
  // sockets: {
  //   connect () {
  //     this.socketId = this.$socket.id
  //   },
  //   message (data) {
  //     console.log(data)
  //   }
  // }
}
</script>

<style lang="scss">
.right-panel{
  width: 660px;
  height: 100%;
  /* float: right; */
}
</style>
